<template></template><template></template
><template>
  <div class="gdxx_box">
    <div class="gdxx_title">其他资质</div>
    <div class="table_gdxx">
      <el-table :data="tableData" stripe fit>
        <!-- <el-table-column prop="serial" label="序号"> </el-table-column> -->
        <el-table-column width="135" type="index" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="code" label="资质证号"> </el-table-column>
        <el-table-column prop="cert_images" label="资质证书">
          <!-- <template slot-scope="scope">
            <el-image
              style="width: 39px; height: 34px"
              :src="$self.imgurl(scope.row.cert_images[0])"
              :preview-src-list="$self.imglisturl(scope.row.cert_images)"
            >
            </el-image>
          </template> -->
          <template slot-scope="scope">
            <!-- <span>{{ url + scope.row.cert_images[0] }}</span> -->
            <el-image
              style="width: 1rem; height: 1rem"
              lazy
              v-if="url + scope.row.cert_images[0]"
              :src="url + scope.row.cert_images[0]"
              :preview-src-list="imgurl(scope.row.cert_images)"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="135"
          v-if="
            infostate == 0 || infostate == 2 || infostate == 5 || infostate == 3
          "
        >
          <template slot-scope="scope">
            <el-button @click="open(2, scope.row)" type="text">修改</el-button>
            <el-button @click="del(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="button_box_jb">
      <!-- <div class="zc button_item" @click="jump()">缴纳会费</div> -->
      <div
        class="zc button_item"
        @click="open(1)"
        v-if="
          infostate == 0 || infostate == 2 || infostate == 5 || infostate == 3
        "
      >
        添加
      </div>
      <div class="xyb button_item" @click="pre()">上一步</div>
      <div
        class="xyb button_item"
        @click="addall()"
        v-if="
          infostate == 0 || infostate == 2 || infostate == 5 || infostate == 3
        "
      >
        提交审核
      </div>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      @close="close()"
    >
      <el-descriptions class="qtzz_tc_box" :column="1" border>
        <el-descriptions-item>
          <template slot="label">
            名称
          </template>
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            资质证号
          </template>
          <el-input v-model="form.code" placeholder="请输入资质证号"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            上传附件
          </template>
          <uploaditem class="qtzz_tc_img" :list="list"></uploaditem>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="additem()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import upload from "../../components/upload.vue";
import { mapState, mapMutations } from "vuex";
import env from "../../../env.js";

export default {
  data() {
    return {
      url: env.API_BASE_URL,
      title: "添加其他资质",
      dialogVisible: false,
      form: {
        name: "",
        code: "",
        cert_images: "",
      },
      type: "", //判断是添加或则编辑
      list: [
        {
          value: {
            dialogVisible: false,
            dialogImageUrl: "",
          },
          type: "upload",
          notes1: "",
          notes: "(400-600k大小, 图像清晰，比例合理，不变形。)",
          imglist: [],
        },
      ],
      tableData: [],
      infostate: "",
    };
  },
  components: {
    uploaditem: upload,
  },
  mounted() {
    this.infostate = this.$route.query.infostate;
    this.getinfostate();
    this.getinfo();
  },
  methods: {
    imgurl(e){
      let arr = []
      for(let i = 0;i<e.length;i++){
        arr.push(this.url + e[i])
      }
      return arr
    },
    ...mapMutations(["sethymenulist"]),
    openDialog(e) {
      window.open(e);
    },
    /**
     * 获取信息状态
     */
    getinfostate() {
      let that = this;
      let data = {};
      that.$http.post("mechanism/check_publicity", data).then((res) => {
        if (res.code == 1) {
          that.infostate = res.data.status;

          if (
            this.infostate == 0 ||
            this.infostate == 2 ||
            this.infostate == 5 ||
            this.infostate == 3
          ) {
          } else {
            this.sethymenulist(false);
          }
        }
      });
    },
    /**
     * 获取其他资质信息
     */
    getinfo() {
      let that = this;
      let data = {
        type: "other",
      };
      that.$http.post("mechanism/list", data).then((res) => {
        if (res.code === 1) {
          that.tableData = res.data.other;
        } else {
          that.tableData = [];
        }
      });
    },
    /**
     * 打开弹窗
     */
    open(e, item) {
      this.type = e;
      if (this.type == 1) {
        this.title = "添加其他资质";
      } else {
        this.title = "编辑其他资质";
        if (item) {
          let ele = JSON.parse(JSON.stringify(item));
          this.list[0].imglist = this.$self.showimg(
            this.$self.imglisturl(ele.cert_images)
          );
          // console.log(this.list);
          this.form = item;
          // console.log(this.form)
        }
      }
      this.dialogVisible = true;
    },

    /**
     * 关闭弹窗，清除数据
     */
    close() {
      this.form = {
        name: "",
        code: "",
        cert_images: "",
      };
      this.list[0].imglist = [];
    },
    /**
     * 添加、编辑的
     */
    additem() {
      // console.log(this.list)
      let arr = [];
      this.list[0].imglist.forEach((item, index) => {
        if (item.response) {
          arr.push(item.response.data.url);
        } else {
          const url = new URL(item.url);
          arr.push(url.pathname);
        }
      });
      let data = this.form;
      data.cert_images = arr.join(",");
      // console.log(data)
      let pathurl = "";
      if (this.type == 1) {
        pathurl = "mechanism/mechanism_add_qualifications";
        this.title = "添加其他资质";
      } else {
        pathurl = "mechanism/mechanism_edit_qualifications";
        this.title = "编辑其他资质";
      }
      this.$http.post(pathurl, data).then((res) => {
        this.$self.ts(res, 3).then(() => {
          this.getinfo();
          this.dialogVisible = false;
        });
      });
    },
    /**
     *
     * @param {当前修改内容的信息} e
     */
    del(e) {
      let data = {
        id: e.id,
      };
      let msgg = {
        code: 1,
        msg: `您确定要将${e.name}从您机构删除吗？`,
      };
      this.$self.ts(msgg, 2).then(() => {
        this.$http
          .post("mechanism/mechanism_del_qualifications", data)
          .then((res) => {
            this.$self.ts(res, 3).then(() => {
              this.getinfo();
              this.dialogVisible = false;
            });
          });
      });
    },
    /**
     * 提交审核
     */
    addall() {
      let data = {};
      this.$http.post("mechanism/check_mechanism", data).then((res) => {
        this.$self.ts(res, 3).then(() => {
          this.$router.push({ path: "/hyjbxx" });
        });
      });
    },
    /**
     * 上一步
     */
    pre() {
      this.$router.push({
        path: "/hyryxx",
        query: { infostate: this.infostate },
      });
      // this.$router.go(-1);
    },
  },
};
</script>
<style>
.gdxx_box {
  margin-left: 0.645rem;
}
.gdxx_title {
  height: 0.5rem;
  background: #1954a4;
  padding-left: 0.3375rem;
  display: flex;
  align-items: center;
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
}
.table_gdxx {
  border: 1px solid #f2f2f2;
  border-bottom: none;
}
.table_gdxx .el-table__header thead th {
  background: #ebf2fc;
  text-align: center;
  color: #1954a4;
  height: 50px;
}
.table_gdxx .el-table__body-wrapper tbody td {
  text-align: center;
}
.qtzz_tc_box .is-bordered .el-descriptions-item__cell {
  padding: 0;
}
.qtzz_tc_box .el-descriptions-item__label.is-bordered-label {
  background: #ffffff;
  width: 18%;
  text-align: center;
}
.qtzz_tc_box .is-bordered .el-descriptions-item__cell .el-input__inner {
  border: none;
}
.qtzz_tc_box .is-bordered-label {
  padding: 10px !important;
}
.qtzz_tc_img .upload_box {
  margin: 0.125rem 0 0.125rem 0.1875rem;
}
.qtzz_tc_img .upload_box > div {
  width: 100%;
}
.qtzz_tc_img .jnhfxq2_pz_uploadbox {
  text-align: left;
}
.qtzz_tc_img .notes1_box {
  margin: 0;
}
.qtzz_tc_img .notes_box {
  text-align: left;
  margin: 0;
  margin-top: 0.125rem;
}
</style>
<style scoped>
.button_item {
  margin-right: 0.375rem;
}
.button_box_jb {
  display: flex;
  /* width: 4.5rem; */
  /* justify-content: space-between; */
  margin-top: 0.2625rem;
  margin-left: 0.275rem;
  padding-bottom: 0.5rem;
}
.button_box_jb .zc,
.xyb,
.hs {
  width: 1.25rem;
  height: 0.5rem;
  background: #1954a4;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.hs {
  background: #7c7c7c;
}
.hs:hover {
  background: #9c9a9a;
}
.button_box_jb .zc:hover {
  background: #1f5fb8;
}
.button_box_jb .xyb {
  background: #fca204;
}
.button_box_jb .xyb:hover {
  background: #e9a125;
}
::v-deep .el-table tr {
  font-size: 0.2rem;
}
</style>
